<template >
    <div class="top">
        <div class="block">
            <el-image :src="refresh" style="height:70px;width:110px" @click="refreshs()"></el-image>
            <el-image :src="add" style="height:70px;width:110px" @click="newjue('新增角色', '')"></el-image>
            <el-image :src="deletes" style="height:70px;width:110px" @click="delect()"></el-image>
            <div class="block2">
                <div class="src4">
                    <el-input
                        v-model="select"
                        prefix-icon="el-icon-search"
                        style="width: 360px; border-radius: 4px; border: 1px solid gray"
                        placeholder="请输入内容"
                    ></el-input>
                </div>
                <div class="src3">
                    <el-image :src="querys" style="height:70px;width:110px" @click="top_query()"></el-image>
                </div>
            </div>
        </div>

        <div class="tabbox">
            <el-table
                ref="multipleTable"
                :data="tableData"
                border
                :header-row-style="{ background: '#005ab5', color: '#ffffff' }"
                tooltip-effect="dark"
                style="width: 100%; margin: 0 auto"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="70px" align="center"> </el-table-column>
                <el-table-column prop="roleName" align="center" label="角色名称" min-width="5%"> </el-table-column>
                <el-table-column prop="content" label="说明备注" min-width="20%" align="center"> </el-table-column>
                <el-table-column prop="status" label="状态" min-width="4%" align="center"> </el-table-column>
                <el-table-column fixed="right" label="操作" min-width="8%" align="center">
                    <template slot-scope="scope">
                        <div class="src5">
                            <el-image :src="src5" style="height:40px;width:70px" @click="newjue('查看角色', scope.row)"></el-image>
                            <el-image :src="src6"  style="margin-left: 10px;height:40px;width:70px" @click="newjue('修改角色', scope.row)"></el-image>
                            <!-- <el-image :src="attachment" style="margin-left: 10px"></el-image> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-body">
                <div class="pagenum_sys">
                    <p>第{{ pageData.page }}页&nbsp;&nbsp;每页{{ pageData.pageSize }}条&nbsp;&nbsp;共{{ pageData.total }}条</p>
                </div>
                <div class="page_sys">
                    <el-button type="text" @click="toPage(1)">首页</el-button>
                    <el-button type="text" @click="prePage()">上一页</el-button>
                    <el-button type="text" @click="nextPage()">下一页</el-button>
                    <el-button type="text" @click="toPage(-1)">末页</el-button>
                    <el-button type="text" style="color: #333">第</el-button>&nbsp;
                    <el-input style="width: 76px" v-model="pageNum" clearable></el-input>&nbsp;
                    <el-button type="text" style="color: #333">页</el-button>
                    <el-button type="text" @click="toPage(pageNum)">转到</el-button>
                </div>
            </div>
        </div>
        <role-input :formVisible="formVisible" :formData="formData" @closeDialog="closeDialog()"></role-input>
        <!-- <el-dialog id="id_eldiaglog" :title="dialog_title" :data="formData" :visible.sync="dialog" width="80%" height="100%">
            <div id="idfram">
                <iframe id="idfram" src="" frameborder="0" width="100%" height="300px"></iframe>
            </div>
        </el-dialog> -->
    </div>
</template>

<script>
import '../../../common/jdCommon.css';
import role from '@/api/system_setting/role_manager.js';
import RoleInput from './role_input';
export default {
  components: { RoleInput },
    name: 'role_manager',
    data() {
        return {
            refresh: require('../../assets/imgs/imgs/刷新按钮.png'),
            deletes: require('../../assets/imgs/imgs/删除按钮.png'),
            querys: require('../../assets/imgs/imgs/查询按钮.png'),
            query_box: require('../../assets/imgs/imgs/查询框.png'),
            src5: require('../../assets/imgs/imgs/查看按钮.png'),
            src6: require('../../assets/imgs/imgs/修改按钮.png'),
            attachment: require('../../assets/imgs/imgs/附件按钮.png'),
            add: require('../../assets/imgs/imgs/组 557.png'),

            input: '',
            input2: '',
            pageData: {
                page: 1,
                pageSize: 10,
                total: 100
            },
            select: '',
            dialog: false, //弹出框
            formVisible:false,
            pageNum: null,
            tableData: [],
            dialog_title: '',
            formData:null
        };
    },
    created() {
        this.gettable();
    },
    methods: {
        // 新增角色弹框/sysManage/roleManage/save
        newjue(stype, row) {
            this.formVisible=true
            this.formData=row
            this.formData.stype=stype
        },
        closeDialog(){
            this.formVisible=false;
            this.formData=null;
        },
        // 搜索框
        top_query() {
            let param = {
                page: this.pageData.page,
                pageSize: this.pageData.pageSize,
                // branchName:this.curDeptId,
                word: this.select,
            };
            this.$post('sysManage/roleManage/query', param).then((res) => {
                this.tableData = res.data.rows;
                this.pageData.total = res.data.total;
            });
        },
        //   删除请求
        delect() {
            let currentSelect = this.$refs.multipleTable.selection;
            currentSelect.forEach((item, index) => {
                 this.$post('/sysManage/roleManage/delete/'+item.id).then((res) => { 
                this.$message.success('删除成功!');
            });
            });
            this.gettable();
        },
        // 表格数据
        gettable() {
            let param = {
                page: this.pageData.page,
                pageSize: this.pageData.pageSize,
                word: ''
            };
             this.$post('sysManage/roleManage/query', param).then((res) => {
                this.tableData = res.data.rows;
                this.pageData.total = res.data.total;
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        prePage() {
            // 上一页
            let page = this.pageData.page;
            if (page === 1) return;
            page--;
            this.pageData.page = page;
            this.gettable();
        },
        nextPage() {
            // 下一页
            let total = Math.ceil(this.pageData.total / this.pageData.pageSize);
            let page = this.pageData.page;
            if (page === total) return;
            page++;
            this.pageData.page = page;
            this.gettable();
        },
        toPage(num) {
            // 走一页
            let total = Math.ceil(this.pageData.total / this.pageData.pageSize);

            if (num > total || num === -1) {
                num = total;
            } else if (num < 1) {
                num = 1;
            }

            this.pageData.page = num;
            this.gettable();
        },
        refreshs(){
            let param = {
                page: this.pageData.page,
                pageSize: this.pageData.pageSize,
                word: ''
            };
             this.$post('sysManage/roleManage/query', param).then((res) => {
                this.tableData = res.data.rows;
                this.pageData.total = res.data.total;
                this.$message.success('刷新成功!');
            });
        },
         changeLayout (type) {
            let $ = this.$
            if (type === 1) {
                $('.right_box').show()
                $('.left-2').css('cssText', 'position: relative;width: 100%;')
            } else if (type === 2) {
                $('.right_box').hide()
                $('.left-2').css('cssText', 'position: absolute;width: 98%;')
            }
        }
    },
     mounted(){
         this.changeLayout(2)
    },
     destroyed() {
        this.changeLayout(1)
    }
};
function dialogFromSrc(id) {
    $('#idfram').html(
        '<iframe id="idfram"  frameborder="0" width="100%" height="300px" src="/?r=' +
            Math.random() +
            '/#/role_input" data-id="' +
            id +
            '" ></iframe>'
    );
}
</script>

<style scoped>
.src4 {
    margin-top: 3%;
    float: left;
}
.src3 {
    float: right;
}
.src5 {
    margin: 0 auto;
}
/deep/.el-image__inner {
    vertical-align: top;
    margin-top: -6px !important;
}
</style>